<template>
  <div class="informationContainer">
    <h3>{{ username }}个人信息</h3>
    <div class="user-information">
      <van-cell-group inset class="cell-group">
        <van-cell title="用户名"  size="large" /><div class="text">{{ username }}</div>
        <van-cell title="年龄" /><div class="text">{{ age }}</div>
        <van-cell title="性别" />
          <div class="text">{{ gender }}</div>
        <van-cell title="用户描述" /><div class="text">{{ dsc }}</div>
      </van-cell-group>
    </div>
    <div style="margin: 16px;">
        <van-button round block type="info" @click="goEditor()">编辑</van-button>
    </div>
    <div style="margin: 16px;">
        <van-button round block type="info" @click="goLogin()">退出登录</van-button>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
export default {
  name: 'UserIndex',
  data () {
    return {
      username: '',
      age: '',
      gender: '',
      dsc: ''

    }
  },
  created () {
    this.username = this.$store.state.user.username
    this.age = this.$store.state.user.age
    this.gender = this.$store.state.user.gender
    this.dsc = this.$store.state.user.dsc
  },
  methods: {
    removeCookie (name) {
      // 删除名为 'myCookie' 的 cookie
      Cookies.remove(name)
    },
    getCookie (name) {
      // 获取名为 'myCookie' 的 cookie 的值
      return Cookies.get(name)
    },
    goEditor () {
      this.$router.push('/editor')
    },
    goLogin () {
      this.$store.commit('saveUsername', '')
      this.$store.commit('savePassword', '')
      this.$store.commit('saveDsc', '')
      this.$store.commit('saveGender', '')
      this.$store.commit('saveAge', '')
      this.removeCookie('token')
      this.removeCookie('username')
      this.removeCookie('password')
      // 还原仓库中的请求数
      this.$store.commit('saveAllCategory', '0')
      this.$router.push('/login')
    }
  }

}
</script>

<style>
  .login-btn {
    border: #fff;
    width: 60%;
    height: 42px;
    margin-top: 60%;
    margin-left: 20%;
    background: linear-gradient(90deg,#ecb53c,#ff9211);
    color: #fff;
    border-radius: 39px;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  h3{
   text-align: center;
  }
  .text{
    /* text-align: center; */
    padding-left: 18px;
    font-size: 20px;
    background-color:rgba(248, 241, 241, 0.88);
  }

</style>
